import React, {memo, useEffect, useRef} from "react";
import {WELLS_COLUMN, WELLS_ROW} from "../../pages/main/plate/config";
import {useDispatch, useSelector} from "react-redux";

import "./index.css";
import {HEAT_MAP_TYPE_CQ} from "../../pages/main/analysis/components/quantification/config";
import {saveData} from "../../pages/main/store/actionCreators";
import {deepClone} from "../../common/utils";

export default memo(function HeatMapTable(props) {
  const {plateClass, setHeatMapWellId} = props;
  const wellsContainer = useRef();  //  Wells容器
  const dispatch = useDispatch();
  const {data, heatMapInfo} = useSelector(state => ({
    data: state.dataReducer.data,
    heatMapInfo: state.quantificationReducer.heatMapInfo
  }));
  let cloneData = {};

  useEffect(() => {
    cloneData = deepClone(data, cloneData);
    let [targetName, type] = [heatMapInfo.target, heatMapInfo.type];
    let channelIndex, allCqSq = [], gradient = [], cqSqType;
    if (type === HEAT_MAP_TYPE_CQ) {
      cqSqType = "cq";
    } else {
      cqSqType = "sq";
    }
    cloneData.wells.forEach(item => {
      const target = item.targets.find(it => it.channel === targetName);
      if (!target) {
        return;
      }
      channelIndex = target.channelIndex;
      allCqSq[allCqSq.length] = item.lines[channelIndex][cqSqType];
    });
    let filterCqSq = allCqSq.filter(it => it !== -1).sort((a, b) => a - b);
    filterCqSq = filterCqSq.map(it => +it.toFixed(1));
    let firstGradient = Math.floor(filterCqSq[0]),
      lastGradient = Math.ceil(filterCqSq[filterCqSq.length - 1]),
      increase = (lastGradient - firstGradient) / 3;
    gradient[0] = firstGradient;
    gradient[3] = lastGradient;
    for (let i = 1; i < 3; i++) {
      gradient[i] = gradient[i - 1] + increase;
    }
    cloneData.wells.forEach(item => {
      const target = item.targets.find(it => it.channel === targetName);
      if (!target) {
        item.heatMapColor = "";
        return;
      }
      let cqSq = item.lines[channelIndex][cqSqType];
      if (cqSq >= gradient[0] && cqSq < gradient[1]) {
        item.heatMapColor = "#ce4e5c";
      } else if (cqSq >= gradient[1] && cqSq < gradient[2]) {
        item.heatMapColor = "#7cc93b";
      } else if (cqSq >= gradient[2] && cqSq <= gradient[3]) {
        item.heatMapColor = "#93bd8d";
      } else {
        item.heatMapColor = "";
      }
    });
    dispatch(saveData(cloneData));
  }, [heatMapInfo]);

  return (
    <section className={plateClass || "heatMapTable"}>
      <div>
        <div/>
        <div>
          {
            WELLS_COLUMN.map(col => <div key={col}>{col}</div>)
          }
        </div>
      </div>
      <div>
        {
          WELLS_ROW.map(row => <div key={row}>{row}</div>)
        }
      </div>
      <div ref={wellsContainer}>
        {
          data.wells.map((well, index) => (
            <div key={well.row * 12 + well.col}
                 style={{backgroundColor: `${well.heatMapColor}`}}
                 onClick={() => setHeatMapWellId(index)}
            >
              <div style={well.sampleName ? {backgroundColor: `${well.sampleColor}`} : null}>{well.sampleName}</div>
              <ul>
                {
                  well.targets.map(target => (
                    <li key={target.name} style={{backgroundColor: target.color}}/>
                  ))
                }
              </ul>
              {
                (well.groupColor && well.show)
                  ? <div style={{backgroundColor: `${well.groupColor}`}}/>
                  : null
              }
            </div>
          ))
        }
      </div>
    </section>
  );
});
